<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>

    </style>
</head>
<body>

<div id="app">
    <div>
        <el-input v-model="info.category" placeholder="请输入商品类别" style="display: inline-block;width: 200px;">
        </el-input>
        <el-button type="success" icon="el-icon-search" circle @click="searchData()"></el-button>
        <el-button type="primary" icon="el-icon-plus" circle @click="showAddGoodsCategoryDlog()"></el-button>

    </div>


    <el-table ref="multipleTable" :data="goodsCategoryArr" tooltip-effect="dark" style="width: 100%"
              >
        <el-table-column type="selection" width="55">
    </el-table-column>
        <el-table-column prop="id" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="category" label="类别" show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
                <el-button type="warning" icon="el-icon-edit" circle @click="showUpdateGoodsCategoryDlog(scope.row.id)">
                </el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="deleteGoodsCategory(scope.row.id)">
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
                   :total="pageTotal">
    </el-pagination>


    <el-dialog title="添加商品类别" :visible.sync="addGoodsCategoryVisible" width="30%" center>
        <el-form :model="goodsCategoryInfo" status-icon :rules="rules" ref="goodsCategoryInfo" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="商品类别" prop="category">
                <el-input maxlength="10" v-model="goodsCategoryInfo.category" placeholder="请输入商品类别" autocomplete="off">
                </el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
					<el-button @click="addGoodsCategoryVisible = false">取 消</el-button>
					<el-button type="primary"  @click="addGoodsCategory()" >确 定</el-button>
				</span>
    </el-dialog>


    <el-dialog title="修改商品类别" :visible.sync="updateGoodsCategoryVisible" width="30%" center>
        <el-form :model="updateGoodsCategoryInfo" status-icon :rules="rules" ref="updateGoodsCategoryInfo" label-width="100px"
                 class="demo-ruleForm">
            <input v-model="updateGoodsCategoryInfo.id" type="hidden">
            <el-form-item label="商品类别" prop="category">
                <el-input maxlength="10" v-model="updateGoodsCategoryInfo.category" placeholder="请输入商品类别" autocomplete="off">
                </el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
					<el-button @click="updateGoodsCategoryVisible = false">取 消</el-button>
					<el-button type="primary" @click="updateGoodsCategory()">确 定</el-button>
				</span>
    </el-dialog>


</div>

<script>
    var haha = new Vue({
        el: "#app",
        data: {
            info: {},
            goodsCategoryArr: [],
            pageTotal: 0,
            addGoodsCategoryVisible: false,
            updateGoodsCategoryVisible: false,
            goodsCategoryInfo: {},
            updateGoodsCategoryInfo:{},
            rules: {
                category: [{
                    required: true,
                    message: '！至多10位字符',
                    trigger: 'blur'
                }]
            }
        },

        methods: {

            handleCurrentChange: function(val) {
                getInfo(val, 10);
            },

            deleteGoodsCategory: function(a) {
                if(confirm("您确定要删除吗？")){
                    $.get("/cai/goodsCategory/deleteGoodsCategory/" + a, function(backData) {
                        getInfo(1, 10);
                    })
                }
            },

            updateGoodsCategory: function() {
                haha.$refs["updateGoodsCategoryInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/goodsCategory/updateGoodsCategory", haha.updateGoodsCategoryInfo, function(backData) {
                            if (backData.code == 1) {
                                haha.$notify.success({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                                haha.updateGoodsCategoryVisible = false;
                                haha.$refs["updateGoodsCategoryInfo"].resetFields();
                                getInfo(1, 10);
                            } else {
                                haha.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                            }
                        })
                    }
                });
            },
            showUpdateGoodsCategoryDlog: function(a) {
                //获取当前信息
                $.get("/cai/goodsCategory/getGoodsCategory/" + a, function(backData) {
                        haha.updateGoodsCategoryInfo = backData.data;
                        /*haha.$refs["updateGoodsCategoryInfo"].resetFields();*/
                        haha.updateGoodsCategoryVisible = true;

                })
            },
            searchData: function() {
                getInfo(1, 10);
            },
            showAddGoodsCategoryDlog: function() {
                haha.addGoodsCategoryVisible = true;
                haha.$refs["goodsCategoryInfo"].resetFields();

            },
            addGoodsCategory: function() {
                haha.$refs["goodsCategoryInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/goodsCategory/addGoodsCategory", haha.goodsCategoryInfo, function(backData) {
                            if (backData.code == 1) {
                                haha.$notify.success({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                                haha.addGoodsCategoryVisible = false;
                                haha.$refs["goodsCategoryInfo"].resetFields();
                                getInfo(1, 10);
                            } else {
                                haha.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                            }
                        })
                    }
                });
            }
        }
    });
    //a页码 b 数量
    function getInfo(a,b) {
        haha.info.pageNo = a;
        haha.info.pageCount = b;

        $.post("/cai/goodsCategory/list", haha.info, function(backData) {
            haha.goodsCategoryArr = backData.data.currentPageData;
            haha.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1, 10);
</script>
</body>
</html>
